<script setup>
import{ref,reactive, onMounted} from 'vue'
import { useUserStore } from '@/stores/user'
import {PostUserLogin} from '@/api/user'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router =useRouter()
const userStore = useUserStore()
const isShow=ref(true)
const userData= reactive({
  loginId:"",
  password:""
})

//自动跳转
const checkLogin =()=>{
  if(userStore.isLogin){
    router.push('/')
  }
}

//登录
const login=()=>{
 PostUserLogin(userData).then((res) => {
   if (res.code === 2000) {
      isShow.value=false
      userStore.setIsLogin(true)
      userStore.setUser(res.data)
      router.push('/')
     }else  {
     ElMessage.error({
     message: res.message,
     duration: 1500
     })
     }
   }).catch((error) => {
    ElMessage.error({
      message: error.message || '登录失败',
      duration: 1500
    })
  })
}
//找回密码
const GetPassWord =()=>{
  router.push('/GetPassWord')
}

onMounted(()=>{
  checkLogin()
})
</script>




<template>
  <div class="login v2">
    <div class="wrapper" v-if="(isShow)">
      <div class="dialog dialog-shadow" style="display: block; margin-top: -260px;">
        <div class="title">
          <h4>使用 apweb 账号 登录官网</h4>
        </div>
        <div v-if="loginPage" class="content">
          <ul class="common-form">
            <li class="username border-1p">
              <div class="input">
                <input type="text" v-model="userData.loginId" placeholder="手机号">
              </div>
            </li>
            <li>
              <div class="input">
                <input type="password" v-model="userData.password" @keyup.enter="login" placeholder="密码">
              </div>
            </li>
            <li style="text-align: right" class="pr">
              <el-checkbox class="auto-login" v-model="autoLogin">记住密码</el-checkbox>
              <!-- <span class="pa" style="top: 0;left: 0;color: #d44d44">{{ruleForm.errMsg}}</span> -->
              <a href="javascript:;" class="register" @click="GetPassWord" style="">忘记密码</a>
              <a href="javascript:;" class="register" @click="toRegister">注册会员账号</a>
              <!-- <a style="padding: 1px 0 0 10px" @click="open('找回密码','请联系作者邮箱找回密码或使用测试账号登录：test | test')">忘记密码 ?</a> -->
            </li>
          </ul>
          <!--登陆-->
          <div style="margin-top: 25px">
            <el-button v-preventReClicks type="primary" style="width: 370px;" @click="login">登录</el-button>
            <router-link to="/Home" > <el-button v-preventReClicks style="width: 370px; margin-left:0px;margin: 10px 0 0 0;">返回</el-button></router-link>
          </div>
          <div class="border">
            <p style="color: red;font-size: 14px;margin-top: 20px;">为了保证广大用户可以更好的使用本网站，推荐使用谷歌浏览器，360极速浏览器 、IE8及以上版本的浏览器。</p>
          </div>

        </div>
      </div>
    </div>
      <!-- 登陆成功 -->
    <div style="width:1000px;margin:auto ;">
      <div v-if="(!isShow)">
         <h1 style="text-align:center;color:red;"> 登录成功</h1>
         <p style="text-align:center;margin-bottom: 20px; ">页面将在3秒后自动跳转到首页。如果系统没有自动跳转，请您
         <a @click="checkLogin" style="color:#00479d;cursor: pointer;">点击这里>></a></p>
        <p style="margin: 0 20px ">会员级别：<span style="color:red">{{typeID==2?"认证会员":"普通会员"}}</span></p>
        <!-- 列表 -->
        <div style="margin: 0 20px">
          <p v-if="typeID!=2" style=" margin: 10px 0px;">如您需在安谱实验电商平台下单，还需要进行【<span @click="RouterLink(true)" style="color:#00479d">认证会员</span>
            】申请。 认证会员可参与 【<span style="color:#00479d" @click="RouterLink(false)">积分兑换</span>】</p>
          <p v-else >会员积分：<span style="color:red">{{integralNum}}</span></p>
          <P v-if="typeID!=2">普通会员和认证会员管理权限说明</P>
          <p v-else>可用于安谱实验电商平台【<span style="color:#00479d" @click="RouterLink(false)">积分商城</span>】兑换礼品</p>
          <table class="tablediv" v-if="typeID!=2">
            <tr>
              <th> </th>
              <th>优惠价</th>
              <th>购物车</th>
              <th>我的询价单</th>
              <th>我的订单</th>
              <th>积分兑换</th>
            </tr>
            <tr>
              <th>普通会员</th>
              <th><i class="el-icon-error" style="color:red"></i></th>
              <th><i class="el-icon-success" style="color:#008000"></i></th>
              <th><i class="el-icon-error" style="color:red"></i></th>
              <th><i class="el-icon-error" style="color:red"></i></th>
              <th><i class="el-icon-error" style="color:red"></i></th>
            </tr>
            <tr>
              <th>认证会员</th>
              <th><i class="el-icon-success" style="color:#008000"></i></th>
              <th><i class="el-icon-success" style="color:#008000"></i></th>
              <th><i class="el-icon-success" style="color:#008000"></i></th>
              <th><i class="el-icon-success" style="color:#008000"></i></th>
              <th><i class="el-icon-success" style="color:#008000"></i></th>
            </tr>
          </table>
        </div>
    </div>
    </div>
  </div>
</template>
